<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>字段筛选</title>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1 class="display-4">字段筛选！</h1>
        <p class="lead">数据处理的第一个步骤，筛选出源数据的有用字段，去除多余字段。</p>
        <hr class="my-4">
        <p class="lead">请选择需要进行筛选工作的数据文件</p>
        <div class="input-group">
            <select class="custom-select">
                <option selected>请选择数据...</option>
                <option value="1">One.txt</option>
                <option value="2">Two.txt</option>
                <option value="3">Three.txt</option>
            </select>
            <div class="input-group-append">
                <button class="btn btn-success" type="button">选择数据文件</button>
                <button class="btn btn-danger" type="button">跳过此部分工作</button>
            </div>
        </div>
        <div class="card my-4">
            <div class="card-body">
                <h5 class="card-title">字段待选区</h5>
                <div class="border rounded" style="padding: 3rem">
                    <button class="btn btn-success" type="button">张三</button>
                    <button class="btn btn-success" type="button">江苏省</button>
                    <button class="btn btn-success" type="button">南京市</button>
                    <button class="btn btn-outline-success" type="button">玄武区</button>
                    <button class="btn btn-success" type="button">苏州大学</button>
                    <button class="btn btn-success" type="button">计算机科学与技术学院</button>
                    <button class="btn btn-success" type="button">软件工程</button>
                    <button class="btn btn-success" type="button">硕士研究生</button>
                    <button class="btn btn-success" type="button">2015级</button>
                    <button class="btn btn-success" type="button">20155227888@stu.suda.edu.cn</button>
                    <button class="btn btn-success" type="button">18888888888</button>
                    <button class="btn btn-outline-success" type="button">苏州市十梓街一号</button>
                </div>
            </div>
        </div>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="筛选结果..." aria-label="result" aria-describedby="basic-addon">
            <div class="input-group-append">
                <button class="btn btn-secondary" type="button">重新筛选字段</button>
                <button class="btn btn-danger" type="button">提交字段筛选结果</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>